<template>
  <div class="pageContent">
    <div class="centerAll">
      <Table ref="xrTable" :list-api="list" :status-api="status" :table-column="tableColumn" :page-config="pageConfig"
        :table-config="tableConfig" @openViewForm="openViewForm" @openEditForm="openEditForm">
        <template v-slot:addBtn>
          <router-link to="/pharmacy/officina_edit" style="margin-left: 12px;">
            <el-button type="success">新增</el-button>
          </router-link>
        </template>
      </Table>
    </div>
  </div>

  <!--  <el-dialog v-model="dialogFormVisible" :title="isRead ? '查看' : '新增'" width="860">
    <Form
      ref="xrForm"
      @remoteMethod="remoteMethod"
      @validatorRules="validatorRules"
      :table-column="tableColumn"
      :form-data="form"
      :is-read="isRead" />
    <template v-if="!isRead" #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog> -->
</template>

<script setup>
  import {
    tableColumn as tableColumns,
    pageConfig,
    tableConfig
  } from './config'
  import Table from '/src/components/Table/index.vue'
  import Form from '/src/components/Form/index.vue'
  import {
    list,
    update,
    create,
    status
  } from '/src/api/pharmacy/basis'
  import {
    ref,
    nextTick,
    onMounted,
    reactive
  } from 'vue'
  import {
    useRoute,
    useRouter
  } from "vue-router";
  const router = useRouter()
  const route = useRoute()
  const dialogFormVisible = ref(false)
  const isRead = ref(false)
  const form = ref({
    status: 1
  })
  const xrForm = ref()
  const xrTable = ref()
  const tableColumn = reactive([...tableColumns])

  const openCreateForm = () => {
    isRead.value = false
    dialogFormVisible.value = true

    nextTick(() => {
      form.value = {
        type: 1
      }
      xrForm.value.ruleFormRef.resetFields()
      xrForm.value.ruleFormRef.clearValidate()
    })
  }
  const openViewForm = (row) => {
    console.log(row)
    router.push({
      name: 'officina_detail',
      query: {
        id: row.id
      }
    });

  }
  const openEditForm = (row) => {
    isRead.value = false
    dialogFormVisible.value = true
    form.value = {
      ...row
    }
    nextTick(() => {
      xrForm.value.ruleFormRef.clearValidate()
      xrForm.value.buildFormSelData()
    })
  }

  const remoteMethod = async (query, f) => {
    for (const i in tableColumn) {
      if (tableColumn[i].prop === f.prop) {
        const options = f.selectRemoteOptions || {};
        options[f.selectRemoteKey] = query;
        const res = await f.asyncSelDataApi(options);
        f.asyncSelData = res.data
        tableColumn.splice(i, 1, f)
      }
    }
  }

  const validatorRules = (prop, rule, value, callback) => {
    switch (prop) {
      case "other_id":
        if (value === form.value.drug_id) {
          callback(new Error('不能选同一个药!'))
        } else {
          callback()
        }
        break;
      default:
        break;
    }
  }

  const submitForm = async () => {
    console.log(xrForm.value.ruleFormRef)
    if (!xrForm.value.ruleFormRef) return
    await xrForm.value.ruleFormRef.validate(async (valid, fields) => {
      console.log(valid)
      if (valid) {
        const options = {
          ...form.value
        }
        delete options.name
        delete options.other_name
        console.log(options.id)
        if (options.id) {
          await update(options)
        } else {
          await create(options)
        }
        dialogFormVisible.value = false
        xrTable.value.resetFormParent()
        await buildFormSelData();
      } else {
        console.log('error submit!', fields)
      }
    })
  }

  const buildFormSelData = async () => {
    for (const column of tableColumn.filter(item => item.isForm)) {
      if (column.asyncSelDataApi) {
        const res = await column.asyncSelDataApi();
        column.asyncSelData = res.data;
      }
    }
  }

  onMounted(async () => {
    await buildFormSelData();
  })
</script>

<style lang="scss" scoped>
</style>